<template>
    <view class="content">
        <u-toast ref="uToast" />
        <!-- 搜索栏 -->
        <view class="searchbg">
            <view class="head flex justify-center align-center ">
                <u-search
                    placeholder="请输入搜索商家的名称"
                    @change="change"
                    @clear="clear"
                    @search="search"
                    @custom="custom"
                    v-model="businessSearch.popularSearches"
                    :show-action="false"
                ></u-search>
            </view>
        </view>

        <!-- 轮播 -->
        <view class="lunbo">
            <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
                <block v-for="(item, index) in calendar" :key="index">
                    <swiper-item class="flex response justify-center" @click="intoDetail(item.link)">
                        <image :src="item.image" class="radius" mode="aspectFill" style="width: 690rpx; height: 300rpx;"></image>
                    </swiper-item>
                </block>
            </swiper>
        </view>
        <!-- 首页的三个选项框 -->
        <view class="bigbox">
            <view class="midbox" @click="jump('/pages/coupon/couponPackageList')">
                <image
                    mode="scaleToFill"
                    style="height: 100%;width: 342rpx;border-radius: 20rpx;"
                    src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/2021-4-26%20114200.png"
                ></image>
            </view>
            <view class="midbox">
                <view class="smallbox" @click="jump('/pages/user-center/coupon')">
                    <image
                        mode="scaleToFill"
                        style="height: 100%;width: 342rpx;border-radius: 20rpx;"
                        src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/youhuiq.png"
                    ></image>
                </view>
                <view class="smallbox" @click="switchTo('/pages/property-pay/property-pay')">
                    <image
                        mode="scaleToFill"
                        style="height: 100%;width: 342rpx;border-radius: 20rpx;"
                        src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/2021-4-26%20114216.png"
                    ></image>
                </view>
            </view>
        </view>
        <!-- 菜单列表 -->

        <scroll-view scroll-x="true">
            <view class="category-list">
                <block v-for="(items, index) in icon_filter" :key="index">
                    <view class="category " @click="intofenlei(items.id)">
                        <image :src="items.image" mode="aspectFill" style="width: 90rpx; height: 90rpx;"></image>
                        <text>{{ items.explanation }}</text>
                    </view>
                </block>
            </view>
        </scroll-view>

        <!-- 筛选栏 -->
        <!-- :class="[btnIndex == 1? 's-btn-act' : 's-btn'] -->
        <view class="chiose">
            <view :class="[btnClass[0] ? 's-btn-act' : 's-btn']" @click="tuijian">推荐</view>
            <view :class="[btnClass[1] ? 's-btn-act' : 's-btn']" @click="juli" class="flex align-center justify-center">
                距离
                <text class="cuIcon-triangledownfill " style="font-size: 45rpx !important; color: #aaaaaa;" v-if="fill"></text>
                <text class="cuIcon-triangleupfill " style="font-size: 45rpx !important; color: #aaaaaa;" v-else></text>
            </view>
            <view :class="[btnClass[2] ? 's-btn-act' : 's-btn']" @click="leixin1" class="flex align-center justify-center">
                类型
                <text class="cuIcon-triangledownfill " style="font-size: 45rpx !important; color: #aaaaaa;" v-if="leixin"></text>
                <text class="cuIcon-triangleupfill " style="font-size: 45rpx !important; color: #aaaaaa;" v-else></text>
            </view>
            <view :class="[btnClass[3] ? 's-btn-act' : 's-btn']" @click="youquan">有券</view>
        </view>
        <!-- 店铺列表 -->
        <!-- <button type="default" class="dddd">ddddd</button> -->
        <view class="maket">
            <view
                class="maketList"
                :key="index"
                v-if="item.coupons.length > 0 || !youquanShow"
                v-for="(item, index) in businessInfo"
                @click="intoDetail(item.id)"
            >
                <image :src="item.image" mode="aspectFill"></image>
                <view class="ma_detail">
                    <view class="ma_name">
                        <view style="font-size: 33upx;color: #000000; width: 70vw;" class="text-cut">{{ item.name }}</view>
                    </view>
                    <view class="ma_addr">{{ item.address }}</view>
                    <view class="ma_youhui">
                        <image src="../../static/qietu/youhuiquan.png" mode="aspectFill"></image>
                        店铺拥有
                        <text style="color: #f9621c;" class="margin-lr-sm">{{ item.coupons.length || '0' }}张</text>
                        优惠券
                    </view>
                    <view class="ma_yhList">
                        <view class="ma_yhdetail" v-for="(item1, index1) in item.products" :key="index1">
                            <image :src="item1.image" class="radius" mode="aspectFill" style="width: 160rpx; height: 120rpx;"></image>
                            <view style="font-family: PingFang SC;">
                                {{
                                    item1.denomination != null
                                        ? item1.denomination.length > 3
                                            ? item1.denomination.substring(0, 4) + '...'
                                            : item1.denomination
                                        : ''
                                }}
                            </view>
                            <view style="color: #f9621c;" class="text-price">{{ item1.price }}元</view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
const app = getApp();
import mSearch from '@/components/mehaotian-search/mehaotian-search.vue';

export default {
    components: {
        mSearch,
    },
    data() {
        return {
            isShow: true,
            btnIndex: 1,
            businessSearch: {
                popularSearches: '',
                iconId: -1,
                longitude: 112.748917,
                latitude: 37.676571,
                categoryId: -1,
                distance: false,
            },
            btnClass: [false, false, false, false],
            youquanShow: false,
            businessInfo: [],
            calendar: [],
            fill: true,
            leixin: true,
            nav: [
                {
                    name: '美食精选',
                    imgurl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/2021-4-26%20114424.png',
                },
                {
                    name: '玩乐精选',
                    imgurl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/2021-4-26%20114428.png',
                },
                {
                    name: '丽人美妆',
                    imgurl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/2021-4-26%20114433.png',
                },
                {
                    name: '亲子精选',
                    imgurl: 'https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/2021-4-26%20114436.png',
                },
            ],
            page: 1,
            limit: 10,
            icon_filter: [],
        };
    },
    onShow() {
        var that = this;
        if (app.globalData.categoryId) {
            this.businessSearch.iconId = app.globalData.categoryId;
        }
        this.getBusinessRe();
    },
    created() {
        var that = this;
        //微信鉴权
        wx.login().then(res => {
            let code = res.code;
            //校验code
            app.globalData.api.programLogin(res.code).then(res2 => {
                ///console.log('res2: ', res2);
                //登录
                app.globalData.api.login({ session_key: res2.resultObj.session_key }).then(res3 => {
                    //console.log('res3: ', res3);
                    app.globalData.OAUTH_BEARER_TOKEN = res3.resultObj.token;
                    //获取用户信息
                    app.globalData.api.getUser().then(res4 => {
                        app.globalData.smmUser = res4.resultObj.user;
                        app.globalData.info = res4.resultObj.identity;
                    });
                });
            });
        });
        //获取首页轮播图
        app.globalData.api.getCarousel().then(res => {
            that.calendar = res.resultObj.calendar;
            that.icon_filter = res.resultObj.icon_filter;
            console.log('that.icon_filte :>> ', that.icon_filte);
        });
    },
    onLoad() {},

    methods: {
        async rcmd() {
            var that = this;
            app.globalData.api.getBusinessBysort(1, 10, this.businessSearch).then(res => {
                console.log('res :>> ', res);
                that.businessInfo = res.rows;
            });
        },
        async carouselJump(item) {
            console.log('item :>> ', item);
        },
        async change(e) {
            if (!e) {
                this.businessInfo.length = 0;
                this.getBusinessRe();
            }
        },
        async clear() {
            this.businessInfo.length = 0;
            this.getBusinessRe();
        },
        async search(e) {
            if (!e) {
                this.$refs.uToast.show({ title: '请输入商家的名称~~', type: 'error' });
            } else {
                this.businessInfo.length = 0;
                this.getBusinessRe();
            }
        },

        jump(url) {
            uni.navigateTo({
                url,
            });
        },
        switchTo(url) {
            uni.switchTab({
                url,
            });
        },
        //刷新商家信息
        getBusinessRe() {
            this.btnClass[0] = !this.btnClass[0];
            var that = this;
            app.globalData.api.getBusiness(this.page, 10, this.businessSearch).then(res => {
                console.log('res :>> ', res);
                that.businessInfo = res.rows;
                if (res.rows.length == 0) {
                    this.$refs.uToast.show({ title: '暂无匹配商家名称~~', type: 'error' });
                }
            });
        },
        //菜单选择icon搜索
        intofenlei(index) {
            this.businessSearch.iconId = index;
            var that = this;
            app.globalData.api.getBusiness(1, 10, this.businessSearch).then(res => {
                that.businessInfo = res.rows;
                if (res.rows.length == 0) {
                    this.$refs.uToast.show({ title: '暂无匹配商家名称~~', type: 'error' });
                }
            });
        },
        // 进入店铺详情
        intoDetail(id) {
            console.log('id :>> ', id);
            uni.navigateTo({
                url: '../ma_detail/ma_detail?id=' + id,
            });
        },

        // 4个筛选框点击事件
        tuijian() {
            // this.btnIndex = 1;
            // this.btnClass[0] = !this.btnClass[0];
            // this.btnClass[1] = false;
            // this.btnClass[2] = false;
            // this.btnClass[3] = false;
            // this.businessSearch = {
            // 	popularSearches: '',
            // 	iconId: -1,
            // 	longitude: 112.748917,
            // 	latitude: 37.676571,
            // 	categoryId: -1,
            // 	distance: false
            // };
            // app.globalData.categoryId = -1;
            // this.getBusinessRe();
            this.rcmd();
        },
        juli() {
            this.fill = !this.fill;
            this.btnIndex = 2;
            this.btnClass[1] = !this.btnClass[1];
            this.btnClass[0] = false;
            this.businessSearch.distance = !this.businessSearch.distance;
            this.getBusinessRe();
        },
        leixin1() {
            this.leixin = !this.leixin;
            this.btnIndex = 3;
            this.btnClass[2] = true;
            this.btnClass[0] = false;
            uni.navigateTo({
                url: '../classify/classify',
            });
        },
        youquan() {
            this.btnIndex = 4;
            this.btnClass[3] = !this.btnClass[3];
            this.btnClass[0] = false;
            this.youquanShow = !this.youquanShow;
            this.getBusinessRe();
        },
    },
};
</script>

<style lang="scss" scoped>
.content {
    background-color: #f7f7f7 !important;
}

.dddd {
}
/* 搜索 */
/deep/ .button-item {
    color: #4d4d4d !important;
}
.searchbg {
    height: 220rpx;
    background-color: #f9cd3a;
    border-bottom-left-radius: 40px;
    border-bottom-right-radius: 40px;
    .head {
        width: 100vw;
        height: 100rpx;
        background-color: #f8ce39;
        /deep/ .u-search {
            display: flex;
            align-items: center;
            width: 690rpx;
        }
    }
}
/* 轮播 */
/deep/ .button-item {
    font-size: 30rpx;
    font-family: PingFang SC;
    font-weight: 500;
    color: #000;
}
.lunbo {
    height: 300rpx;
    width: 100vw;
    margin-top: -110rpx;
}
// .lunbo image{
// 	height: 300rpx;
// 	width: 94%;
// 	border-radius: 20rpx;
// }
/* 三个选项框 */
.bigbox {
    display: flex;
    justify-content: space-between;
    height: 337rpx;
    width: 705rpx;
    margin: 30rpx auto;
    border-radius: 20rpx;
}
.midbox {
    height: 100%;
    width: 342rpx;
    border-radius: 20rpx;
}
.smallbox {
    height: 46.5%;
    width: 342rpx;
    border-radius: 20rpx;
}
.smallbox:first-child {
    margin-bottom: 6%;
}
/* 菜单列表 */
.category-list {
    display: flex;
    //display: -webkit-flex;
    // justify-content: space-between;
    flex-direction: row;
    // flex-wrap: wrap;
    width: 100%;

    // margin: 0 40rpx;
}

.category {
    display: flex;
    flex-direction: column;
    //width: 20%;
    //margin-top: 20rpx;
    //margin-bottom: 10rpx;

    margin-right: 30rpx;
    margin-left: 10rpx;
    text {
        white-space: nowrap;
    }
}

.category image {
    display: flex;
    justify-content: center;
    margin: 10rpx auto;
    width: 40px;
    height: 40px;
}

.category text {
    margin-top: 3upx;
    width: 100%;
    text-align: center;
    justify-content: center;
    font-size: 26upx;
    font-weight: normal;
    color: #4d4d4d;
}
/* 筛选栏 */
.chiose {
    display: flex;
    justify-content: space-between;
    font-size: 31upx;
    height: 52rpx;
    width: 675rpx;
    margin: 30rpx auto;
}
.s-btn {
    width: 152rpx;
    height: 100%;
    line-height: 52rpx;
    text-align: center;
    border-radius: 30rpx;
    background-color: #ebebeb;
}
// 选中
.s-btn-act {
    width: 152rpx;
    height: 100%;
    font-size: 32upx;
    line-height: 52rpx;
    text-align: center;
    border-radius: 30rpx;
    border: 0.5px solid #f8ce39;
    background-color: #f7efcf;
}
// 店铺列表
.maket {
    width: 705rpx;
    margin: 0 auto 70rpx;

    .maketList {
        display: flex;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 20rpx;
        padding: 25rpx;
        border-radius: 20rpx;
        background-color: #ffffff;

        image {
            width: 130rpx;
            height: 130rpx;
        }
        .ma_detail {
            width: 480rpx;
            margin-left: 20rpx;
            line-height: 54rpx;
        }
        .ma_name {
            font-family: PingFang SC;
            display: flex;
            width: 100%;
            justify-content: space-between;
            align-items: center;
            .juli {
                padding: 0 5rpx;
                height: 35rpx;
                line-height: 35rpx;
                font-size: 22upx;
                border-radius: 6rpx;
                background: linear-gradient(to right, #ffe68a, #f8d041);
            }
        }
        .ma_addr {
            font-size: 27upx;
            color: #6f6f6f;
        }
        .ma_youhui {
            font-size: 27upx;
            color: $uni-text-color-grey;
            display: flex;
            align-items: center;

            image {
                width: 35rpx;
                height: 26rpx;
                margin-right: 15rpx;
            }
        }
        .ma_yhList {
            display: flex;
            overflow: hidden;
            margin: 10rpx 0;
            line-height: 35rpx;

            .ma_yhdetail {
                width: 155rpx;
                margin-right: 10rpx;
            }

            image {
                background-color: #00bfff;
                width: 155rpx;
                height: 105rpx;
            }
        }
    }
}
</style>
